<template>
  <div class="about">
    <my-input v-model:message="msg"></my-input>
    <p>{{ msg }}</p>

    <p>{{ number }}</p>
    <input type="text" v-model="number" @input="$store.commit('kong')" />
    <button @click="numadd">++</button>

    <p>展示首页输入框的内容：{{ parentMsg }}</p>
  </div>
</template>
<script>
// vue3 vuex 没有了辅助函数
import myInput from "../components/myInput.vue";
import { ref, toRefs, getCurrentInstance, toRef } from "vue";
import { useStore } from "vuex";
// import bus from "../utils/eventBus";
export default {
  components: { myInput },
  setup(props) {
    const msg = ref("待我渡劫成功，必保河南百年");
    const { state, commit } = useStore();
    // console.log(state);
    const { proxy } = getCurrentInstance();
    const change = (val) => {
      // console.log(val);
      msg.value = val;
    };
    // console.log();
    const parentMsg = ref("");
    proxy.$bus.$on("parent", (val) => {
      parentMsg.value = val;
    });
    // $on("parent", (val) => {
    //   console.log(val);
    // });
    const numadd = () => {
      commit("add");
    };
    // toRef 展开对象的单个属性，toRefs 展开整个对象
    return {
      msg,
      change,
      number: toRef(state, "number"),
      numadd,
      parentMsg,
    };
  },
};
</script>

